<template>
  <div class="who-is-working">
    <div class="title">Who's Working</div>
    <div class="content">
      <div class="table-search clearfix">
        <div class="search-content">
          <input class="search-input" type="search" placeholder="Search employees"><i class="iconfont search-icon">&#xe667;</i>
        </div>
      </div>
      <i-table class="table-panel"    :columns="employeeStatusColumn" :data="employeeStatusList"></i-table>
    </div>
  </div>
</template>

<script>
import defaultAvatar from 'src/assets/images/default_avatar.png';
import dAvatar from 'src/components/common/avatar-componet.vue';
import Vue from 'vue';
export default {
  name: 'whoIsWorking',
  components:{
    dAvatar
  },
  created(){
    this.init();
  },
  computed:{
    employeeStatusList(){
      return this.$store.getters.employeeStatusList;
    }
  },
  watch:{

  },
  data () {
    return {
      searchValue:'',
      defaultAvatar:defaultAvatar,
      employeeStatusColumn: [
        {
          title: 'Employee',
          key: 'name',
          className:'avatar-cell',
          render (row, column, index) {
            return `<d-avatar :width="42" status="${row.status}" name="${row.name}" img-url="${row.imgUrl}"></d-avatar>`
          }
        },
        {
          title: 'Time In',
          key: 'timeIn'
        },
        {
          title: 'Day Total',
          key: 'dayTotal'
        },

       /* {
          title: ' ',
          align:'right',
          className:'edit-column',
          render (row, column, index) {
            return `<button class="edit-button" type="button" @click="editTableRow($event)">Timesheet Editor</button>`;
          }
        }*/
      ],
    }
  },
  methods:{
    init(){
      this.$store.dispatch('getEmployeeStatusList')
    },
    editTableRow(e){
      var $tr = $(e.target).parents('tr');
      if($tr.next().hasClass('edit-row')){
        $tr.parent().find('.edit-row').remove();
          return
      }else{
        $tr.parent().find('.edit-row').remove();
      }

      var editForm =`
      <Form ref="formInline" :label-width="80" label-position="left">
        <Row>
          <i-col class="form-item" span="6">
            <Form-item label="Name">
              <Input ></Input>
            </Form-item>
          </i-col>
           <i-col class="form-item"  span="7">
            <Form-item label="Time In">
              <Input ></Input>
            </Form-item>
          </i-col>
          <i-col class="form-item"  span="7">
            <Form-item label="Time Out">
              <Input ></Input>
            </Form-item>
          </i-col>
          <i-col class="form-item"  span="4">
            <Form-item label="Total Hours" class="text-left">
              6:31
            </Form-item>
          </i-col>
        </Row>
        <Row>
          <i-col class="form-item" span="6">
            <Form-item label="Time Zoom">
              <Input ></Input>
            </Form-item>
          </i-col>
        </Row>
        <div class="text-right">
          <Button @click="cancel">Cancel</Button>
          <Button @click="done" type="primary">Done</Button>
        </div>
    </Form>`;
      var len = this.employeeStatusColumn.length;
      var tr = `<tr id="edit-row" class="edit-row animated fadeIn" @click="aa"><td  class="edit-cell" colspan="${len}">${editForm}</td></tr>`
      var render = Vue.compile(tr);
      var $parent = this;
      var editComponent = new Vue({
        render: render.render,
        methods:{
          done(){

          },
          cancel(){

          }
        }
      });
      var  Cell = editComponent.$mount();
      $tr.after(Cell.$el);
    },
  }
}
</script>
<Style>
  .edit-button{
    color: rebeccapurple;
  }
</Style>

<style  rel="stylesheet/scss" type="text/css" lang="scss"  >
  @import "src/assets/css/variable.scss";
  .who-is-working{
    >.title{
    }
    .content{
      .table-search{
        margin-bottom: 12px;
        .search-content{
          position: relative;
          float: right;
          width: 220px;
          height: 36px;
          >.search-input{
            box-sizing: border-box;
            width: 100%;
            height: 100%;
            border: 1px solid $baseBorderColor;
            border-radius: 3px;
            padding: 0 12px 0 40px;
            &:focus{
              border: 1px solid #76C9FF;
              box-shadow: 0 0 2px 0 #009AFF;
              border-radius: 3px;
            }
          }
          >.search-icon{
            position: absolute;
            left: 10px;
            top:6px;
            font-size: 20px;
            color:#96ACB9;
          }
        }
      }

      .table-panel{
        width: 100%;
        font-size: 14px;
        color: #335570;
        .ivu-table-header  th{
          color: #9BAFBC;
          background-color: #f1f8ff;
        }
        .edit-row{
          .edit-cell{
            background-color: #fffeef;
            text-align: center;
            padding: 20px;
            .form-item{
              padding: 0 12px;
            }
          }
        }
        .ivu-table td{
          &.edit-column{
            .edit-button{
              border: 1px $baseColor solid;
              color: $baseColor;
              background-color: #fff;
              padding: 4px 12px;
              border-radius: 4px;
            }
          }
          &.avatar-cell{

          }
        }
      }
    }
  }
</style>
